<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="c1" width="600" height="400"></canvas>

    <script>
        /** @type {HTMLCanvasElement} */
        // 画布
        let c1 = document.getElementById("c1")
        // 画笔
        let ctx = c1.getContext("2d")

        let heartPath = new Path2D()
        heartPath.moveTo(300, 200)
        heartPath.bezierCurveTo(350, 150, 400, 200, 300, 300)
        heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200)

        // 创建线性渐变
        let index = 0
        function render() {
            ctx.clearRect(0, 0, 600, 400)
            index += 0.01
            if (index > 1) {
                index = 0
            }
            let linearGradient = ctx.createLinearGradient(100, 100, 600, 400)
            linearGradient.addColorStop(0, "red")
            linearGradient.addColorStop(index, "pink")
            linearGradient.addColorStop(1, "blue")
            ctx.fillStyle = linearGradient
            ctx.fill(heartPath)
            requestAnimationFrame(render)
        }
        // render()

        // 控制raf的执行频率，默认1秒执行60次
        let prev = 0
        function animloop(timeStep) {
            if (timeStep - prev > 34) {
                console.log(timeStep - prev)
                prev = timeStep
            }
            window.requestAnimationFrame(animloop);
        }
        // animloop()

        // 径向渐变
        // 开始渐变的圆，结束渐变的圆
        let RadialGradient = ctx.createRadialGradient(30, 20, 0, 30, 20, 50)
        RadialGradient.addColorStop(0, "red")
        RadialGradient.addColorStop(1, "blue")
        ctx.fillStyle = RadialGradient
        ctx.fillRect(0, 0, 60, 40)

        // 带高光的球
        ctx.arc(300, 200, 100, 0, Math.PI * 2)
        let RadialGradient2 = ctx.createRadialGradient(260, 160, 0, 300, 200, 100)
        RadialGradient2.addColorStop(0, "#ddd")
        RadialGradient2.addColorStop(1, "blue")
        ctx.fillStyle = RadialGradient2
        ctx.fill()

        // 圆锥渐变
        ctx.beginPath()
        let ConicGradient = ctx.createConicGradient(Math.PI / 4, 300, 350)
        ConicGradient.addColorStop(0, "red")
        ConicGradient.addColorStop(0.5, "yellow")
        ConicGradient.addColorStop(1, "green")
        ctx.fillStyle = ConicGradient
        ctx.arc(300, 350, 50, 0, Math.PI * 2)
        ctx.fill()
    </script>
</body>

</html>